<template>
  <div class="app-map">
    <div class="rightArea_Down">
      <!-- <div class="block">
        <span>瑕疵地图缩放</span>
        <el-slider
          v-model="zoomSilder"
          :show-tooltip="false"
          @change="zoomSilderChange(item)"
        ></el-slider>
      </div> -->
      <div style="height: 100%; width: 100%; display: flex">
        <el-button
          type="danger"
          style="height: 100%; width: 44%; font-size: 14px"
          @click="getData"
          >查看图片</el-button
        >
        <div class="heightSilder">
          <span class="h-text">显示区域设置</span>
          <!-- <el-slider
            style="width: 70%; margin-left: 8px"
            v-model="heightSilder"
            :show-tooltip="false"
            :step="10"
            @change="heightSilderChange()"
          ></el-slider> -->
          <el-slider
            style="width: 70%; margin-left: 8px"
            v-model="heightSilderTwo"
            :format-tooltip="formatTooltip"
            :step="10"
            show-stops
            @change="heightSilderChangeTwo()"
          ></el-slider>
        </div>
      </div>
    </div>
    <div class="headboard_top">
      <h4>缺陷轨迹</h4>
    </div>
    <div class="modelArea">
      <div class="modelArea_up">
        <div id="cyMap" ref="cyMapTest" class="cyMap" v-loading="loading">
          <div id="cy" class="cy" ref="cy"></div>
        </div>
        <div class="scroll">
          <vue-scroll :ops="ops" @handle-scroll="onScroll" ref="vueScroll">
            <div class="content" ref="content"></div>
          </vue-scroll>
        </div>
        <div class="cy_Area">
          <div
            style="height: 10%; width: 100%; display: grid; place-items: center"
          >
            <span>{{ extend.up ? extend.up : "0.0" }}</span>
          </div>
          <div
            style="height: 10%; width: 100%; display: grid; place-items: center"
          >
            <span>{{ extend.height ? extend.height : "0.0" }}</span>
          </div>
          <div
            style="width: 100%; height: 10%; display: grid; place-items: center"
          >
            <span>{{ extend.down ? extend.down : "0.0" }}</span>
          </div>
        </div>
      </div>
      <div class="modelArea_down">
        <div
          style="height: 100%; width: 25%; display: grid; place-items: start"
        >
          {{ extend.left ? 0 : "0.0" }}
        </div>
        <div
          style="height: 100%; width: 50%; display: grid; place-items: center"
        ></div>
        <div style="height: 100%; width: 20%; display: grid; place-items: end">
          {{ extend.right ? extend.right : "0.0" }}
        </div>
      </div>
    </div>
    <!-- 右键瑕疵Map节点的详情信息 -->
    <el-drawer title="瑕疵点信息详情" :visible.sync="nodeDetail" size="36%">
      <div class="drawerDetail">
        <div class="imageDetail">
          <el-image style="width: 74%; height: auto" :src="getPic(this.url)">
          </el-image>
        </div>

        <div class="infoDetail">
          <el-form label-width="80px">
            <el-row>
              <el-col :span="12"
                ><el-form-item label="生产日期">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.date"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="缺陷编号">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.defectid"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="产品卷号">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.reelnum"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="缺陷类型">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.defecparamname"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="横  坐标">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.xaxis"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="纵  坐标">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.yaxis"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="缺陷宽度">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.vlength"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="缺陷高度">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.hlength"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12"
                ><el-form-item label="缺陷面积">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.area"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item label="相机编号">
                  <el-input
                    :disabled="true"
                    v-model="this.nodeInfo.cameraid"
                    placeholder=""
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </el-drawer>
    <!-- 瑕疵节点hover图片 -->
    <div id="popup" class="popup" style="display: none">
      <div id="image-container">
        <img id="node-image" src="" style="width: 200px; height: 200px" />
      </div>
      <p id="node-id" style="textalign: center"></p>
    </div>
    <!-- 瑕疵类型筛选 -->
    <!-- <el-drawer title="瑕疵类型筛选" :visible.sync="defectType" size="26%">
        <el-checkbox-group v-model="checkboxGroup1" size="large">
          <el-checkbox
            class="checkBoxStyle"
            :label="item"
            border
            v-for="(item, idx) in defectCategory"
            :key="idx"
          ></el-checkbox>
        </el-checkbox-group>
        <el-button
          type="primary"
          style="width: 99%;margin-top: 20px;justify-content: center;"
          @click="checkBoxChange(item)"
          >确定</el-button
        >
    </el-drawer> -->
  </div>
</template>

<script>
import * as api from "./api.js";
import cytoscape from "cytoscape";
import moment from "moment";
import vueScroll from "vuescroll";

var cyObject = null;
export default {
  name: "defectMap",
  components: {
    vueScroll,
  },
  // 父传来的搜索数据
  props: ["searchFormFather"],
  data() {
    return {
      // cyObject: null,
      //条件搜索
      searchForm: {
        startTime: "",
        endTime: "",
        batchnum: "",
        reelnum: "",
        machinecode: "",
        isAll: "",
        defectType: "",
      },
      machineList: [],
      cyMap: [],
      //瑕疵地图
      openMap: false,
      fullscreenLoading: false,
      direction: "rtl",
      canMap: false,
      btnload: false,
      center: {}, //中心点
      copyNodes: [],
      nodes: [],
      edges: [],
      options: {
        name: "preset",
        positions: undefined, // map of (node id) => (position obj); or function(node){ return somPos; }
        zoom: 0.44, // the zoom level to set (prob want fit = false if set)
        pan: { x: 0, y: 0 }, // the pan level to set (prob want fit = false if set)
        fit: false, // whether to fit to viewport
        padding: 30, // padding on fit
        animate: false, // whether to transition the node positions
        animationDuration: 500, // duration of animation in ms if enabled
        animationEasing: undefined, // easing of animation if enabled
        animateFilter: function (node, i) {
          return true;
        }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
        ready: undefined, // callback on layoutready
        stop: undefined, // callback on layoutstop
        transform: function (node, position) {
          return position;
        }, // transform a given node position. Useful for changing flow direction in discrete layouts
      },
      zoomSilder: 40, //瑕疵地图缩放
      defectCategory: [
        "烂胶",
        "气泡",
        "布毛",
        "凹痕",
        "色线",
        "褶皱",
        "停机印",
        "驳口",
        "针板孔",
        "布接头",
      ],
      checkboxGroup1: [
        "烂胶",
        "气泡",
        "布毛",
        "凹痕",
        "色线",
        "褶皱",
        "停机印",
        "驳口",
        "针板孔",
        "布接头",
      ], //筛选瑕疵
      mapZoom: 3,
      //瑕疵样式
      style: {},
      //地图位置大小
      extend: {
        height: null,
        width: null,
        up: null,
        down: null,
        left: null,
        right: null,
      },
      // 瑕疵点详情
      nodeDetail: false,
      // url
      url: "",
      // 瑕疵点信息
      nodeInfo: "",
      // 瑕疵筛选弹窗
      // defectType: false,
      //加载
      loading: false,

      ops: {
        vueScroll: {},
        scrollPanel: {},
        rail: {
          opacity: "0.1",
          border: "1px solid #246177",
          size: "18px",
        },
        bar: {
          size: "18px",
          background: "#246177",
          keepShow: true,
        },
      },
      heightSilder: 100,
      heightSilderTwo: 0, //一格一百米版
      hparam: 1,
      hparamTwo: 100, //一格一百米版
      nodesCopy: [],
      meterHeight: null,
      ableHeightControl: false
    };
  },
  methods: {
    getData() {
      this.nodes = [];
      this.copyNodes = [];
      this.edges = [];
      this.machineList = [];
      this.cyMap = [];
      let param = {
        batchnum: this.searchForm.batchnum,
        reelnum: this.searchForm.reelnum,
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
        machinecode: this.searchForm.machinecode,
        isAll: this.searchForm.isAll,
        defectType: this.searchForm.defectType,
      };
      if (param.batchnum == "" || param.batchnum == null) {
        this.$message({
          message: "瑕疵地图订单号未选择",
          type: "info",
        });
        this.btnload = false;
        return;
      }
      if (param.reelnum == "" || param.reelnum == null) {
        this.$message({
          message: "瑕疵地图卷号未选择",
          type: "info",
        });
        this.btnload = false;
        return;
      }
      this.loading = true;
      api.defectMapFilter(param).then((res) => {
        this.defectData = res.data.data;
        res.data.data.forEach((element) => {
          if (!this.machineList.includes(element.machinecode)) {
            this.machineList.push(element.machinecode);
            this.cyMap.push(element.machinecode);
          }
        });
        res.data.data.forEach((item) => {
          if (item.machinecode == this.machineList[0]) {
            this.defectStyle(item.defecparamname);
            this.nodes.push({
              data: {
                id: item.dataId,
                defecparamname: item.defecparamname,
                imagename: item.imagename,
                imagepath: item.imagepath,
                property: item,
              },
              style: this.style,
              position: {
                x: parseFloat(item.xaxis),
                y: parseFloat(item.yaxis),
              },
            });
            this.copyNodes.push({
              data: {
                id: item.dataId,
                defecparamname: item.defecparamname,
                imagename: item.imagename,
                imagepath: item.imagepath,
                property: item,
              },
              style: this.style,
              position: {
                x: parseFloat(item.xaxis),
                y: parseFloat(item.yaxis),
              },
            });
          }
        });
        // this.copyNodes = this.nodes;
        this.options.pan = { x: 0, y: 0 };
        this.createCytoscape();
        this.loading = false;
      });
    },

    createCytoscape() {
      let this_ = this;
      cytoscape.warnings(false);
      cyObject = cytoscape({
        container: document.getElementById("cy"),
        autolock: true,
        zoomingEnabled: true,
        panningEnabled: true,
        userPanningEnabled: false,
        boxSelectionEnabled: true,
        userZoomingEnabled: false, //滚轮缩放
        wheelSensitivity: 0.1,
        autounselectify: true,
        autoungrabify: false,
        minZoom: 0.01,
        style: [
          {
            selector: "node",
            style: {
              content: "data(defecparamname)",
              "text-opacity": 0.5,
              height: 20,
              width: 20,
              shape: "round-rectangle",
              "pie-size": "100%",
              "text-valign": "center",
              "text-halign": "center",

              "pie-1-background-color": "#E8747C",
              "pie-1-background-size": "mapData(occupy, 0, 10, 0, 100)",
            },
          },
          {
            selector: ":parent",
            css: {
              "text-valign": "top",
              "text-halign": "center",
            },
          },
        ],
        elements: {
          //节点数据
          nodes: this.nodes,
          edges: this.edges,
        },
        layout: this.options,
      });
      //左键单击节点
      cyObject.on("tap", "node", (e) => {
        console.log(e.target._private.data);
        const imgName = e.target._private.data.imagename;
        const imgPath = e.target._private.data.imagepath;
        this.url = imgPath + "/" + imgName;
        this.nodeInfo = e.target._private.data.property;
        // 取消显示小图
        var popup = document.getElementById("popup");
        var imageContainer = document.getElementById("image-container");
        imageContainer.style.display = "none";
        popup.style.display = "none";
        this.nodeDetail = true;
        // 时间戳->日期
        this.nodeInfo.date = moment(this.nodeInfo.date * 1).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      });
      //鼠标覆盖节点
      cyObject.on("mouseover", "node", function (event) {
        var node = event.target;
        var x = node.renderedPosition().x;
        var y = node.renderedPosition().y;

        var popup = document.getElementById("popup");
        var imageContainer = document.getElementById("image-container");
        var nodeImage = document.getElementById("node-image");
        var nodeId = document.getElementById("node-id");

        nodeId.textContent = "瑕疵类型: " + node._private.data.defecparamname;
        const imgName = event.target._private.data.imagename;
        const imgPath = event.target._private.data.imagepath;
        this.url = this_.getPic(imgPath + "/" + imgName);
        // console.info(this.url)
        nodeImage.src = this.url; // 设置要显示的图片的URL
        // console.log(nodeImage)
        imageContainer.style.display = "block";

        popup.style.left = x + 20 + "px";
        popup.style.top = y + 20 + "px";
        popup.style.display = "block";
        console.info(this.url);
      });
      // 鼠标取消覆盖节点
      cyObject.on("mouseout", "node", function (event) {
        var popup = document.getElementById("popup");
        var imageContainer = document.getElementById("image-container");

        imageContainer.style.display = "none";
        popup.style.display = "none";
      });
      cyObject.on("pan", (event) => {
        cyObject.pan().x = 0;
        console.log("当前中心点坐标:", cyObject.pan().y * 0.46);
        this.$refs.vueScroll.scrollTo(0, 0);
        console.log(this.$refs.vueScroll);
        // 获取选定节点的位置
        this.extend.height = (cyObject.extent().h / 1000).toFixed(1);
        this.extend.width = (cyObject.extent().w / 1000).toFixed(1);
        this.extend.up = (cyObject.extent().y1 / 1000).toFixed(1);
        this.extend.down = (cyObject.extent().y2 / 1000).toFixed(1);
        this.extend.left = (cyObject.extent().x1 / 1000).toFixed(1);
        this.extend.right = (cyObject.extent().x2 / 1000).toFixed(1);
      });
      
      // 一格一百米
      this.meterHeight = (cyObject.extent().h / 1000).toFixed(1)
      if(this.ableHeightControl == false){
        this.hparamTwo = this.meterHeight
        this.extend.height = (cyObject.extent().h / 1000 /(this.meterHeight/this.hparamTwo)).toFixed(1);
        this.extend.up = (cyObject.extent().y1 / 1000 / (this.meterHeight/this.hparamTwo)).toFixed(1);
        this.extend.down = (cyObject.extent().y2 / 1000 / (this.meterHeight/this.hparamTwo)).toFixed(1);
      }else{
        this.extend.height = (cyObject.extent().h / 1000 /(this.meterHeight/this.hparamTwo)).toFixed(0);
        this.extend.up = (cyObject.extent().y1 / 1000 / (this.meterHeight/this.hparamTwo)).toFixed(0);
        this.extend.down = (cyObject.extent().y2 / 1000 / (this.meterHeight/this.hparamTwo)).toFixed(0);
      }
      
      // 百分比
      // this.extend.height = (cyObject.extent().h / 1000 / this.hparam).toFixed(1);
      // this.extend.up = (cyObject.extent().y1 / 1000 / this.hparam).toFixed(1);
      // this.extend.down = (cyObject.extent().y2 / 1000 / this.hparam).toFixed(1);
      
      this.extend.width = (cyObject.extent().w / 1000).toFixed(1);
      this.extend.left = (cyObject.extent().x1 / 1000).toFixed(1);
      this.extend.right = (cyObject.extent().x2 / 1000).toFixed(1);
      // this.$refs.cyMapTest.style.overflow = "auto";
      this.calculateCanvasHeight();
      this.addScrollListener();
    },
    defectStyle(str) {
      this.style = {};
      if (str.indexOf("烂胶") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("气泡") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "triangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("布毛") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("凹痕") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "star",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("色线") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("褶皱") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "round-rectangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("停机印") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("驳口") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "round-rectangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("针板孔") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "triangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("布接头") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else {
        this.style = {};
        console.log("str", str);
      }
    },
    //瑕疵地图高度控制(百分比压缩版)
    heightSilderChange() {
      //对象数组不能浅拷贝，只能深拷贝
      let newArr = this.copyNodes.map((obj) => ({ ...obj }));
      let jsonString = JSON.stringify(newArr);
      // 将JSON字符串解析回对象数组
      this.nodes = JSON.parse(jsonString);
      // this.nodes = this.copyNodes
      this.hparam = 1;
      if (this.heightSilder == 0) {
        this.hparam = 0.05;
      } else {
        this.hparam = this.heightSilder / 100;
      }
      this.nodes.forEach((item) => {
        item.position.y = item.position.y * this.hparam;
      });
      console.log(this.nodes[0], newArr[0]);
      this.createCytoscape();
    },
    //瑕疵地图高度控制(一格一百米版)
    heightSilderChangeTwo() {
      //对象数组不能浅拷贝，只能深拷贝
      let newArr = this.copyNodes.map((obj) => ({ ...obj }));
      let jsonString = JSON.stringify(newArr);
      // 将JSON字符串解析回对象数组
      this.nodes = JSON.parse(jsonString);
      // this.hparamTwo = 100;
      if (this.heightSilderTwo == 0) {
        this.ableHeightControl = false
        this.createCytoscape();
        return;
      } else {
        this.ableHeightControl = true
        this.hparamTwo = this.heightSilderTwo * 10;
        this.nodes.forEach((item) => {
          item.position.y = item.position.y * (this.meterHeight/this.hparamTwo);
        });
        this.createCytoscape();
      }
    },
    formatTooltip(val) {
      if (val == 0) {
        return "正常显示";
      } else {
        return val * 10 + "米";
      }
    },
    //瑕疵地图缩放
    zoomSilderChange() {
      if (this.zoomSilder == 0) {
        this.zoomSilder += 1;
      }
      this.options.zoom = this.zoomSilder / 50;
      this.createCytoscape();
    },
    // 瑕疵类型筛选
    // checkBoxChange(row) {
    //   let arr = [];
    //   this.copyNodes.forEach((item) => {
    //     if (
    //       this.checkboxGroup1.some((ele) =>
    //         item.data.defecparamname.includes(ele)
    //       )
    //     ) {
    //       arr.push(item);
    //     }
    //   });
    //   this.nodes = arr;
    //   this.createCytoscape(row);
    //   this.defectType = false;
    // },
    // 获取瑕疵点图片
    getPic(str) {
      return api.defectImageUrl(str);
    },
    calculateCanvasHeight() {
      // 根据节点坐标计算画布的高度
      let maxY = 0;
      this.nodes.forEach((node) => {
        const position = node.position;
        if (position.y > maxY) {
          maxY = position.y;
        }
      });
      // 设置容器高度
      console.log("1234565678", maxY / this.hparam);
      let height = Math.max(maxY * this.options.zoom + 10, 890);
      this.$refs.content.style.height = height + "px";
      // console.log("1234565678",this.$refs.content.style.height);
    },
    addScrollListener() {
      // 监听窗口大小变化事件，重新计算容器高度
      window.addEventListener("resize", this.calculateCanvasHeight);
    },
    onScroll(event) {
      // console.log(cyObject)
      // cyObject.pan().y = -event.scrollTop
      // cyObject.emit('layoutstop');
      console.log("cyObject.pan().y");
      this.options.pan.y = -event.scrollTop;
      this.createCytoscape();
    },
  },
  watch: {
    searchFormFather: {
      handler(newValue) {
        this.searchForm.batchnum = newValue.batchnum;
        this.searchForm.reelnum = newValue.reelnum;
        this.searchForm.machinecode = newValue.machinecode;
        this.searchForm.startTime = newValue.startTime;
        this.searchForm.endTime = newValue.endTime;
        this.searchForm.isAll = newValue.isAll;
        this.searchForm.defectType = newValue.defectType;
      },
      deep: true,
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.app-map {
  // padding-right: 10px;
  height: 100%;
  width: 100%;
}
.headboard_top {
  margin-top: 6px;
  color: #246177;
  height: 2.5%;
  width: 100%;
  // border-bottom: 1px solid #000000;
}
.modelArea {
  position: relative;
  border-top: 0;
  margin-bottom: 4px;
  width: 100%;
  height: 90.5%;
  background: #fff;
  border-radius: 0;
  padding: 6px;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  font-size: small;
  .modelArea_up {
    display: flex;
    width: 100%;
    height: 98.5%;
    .cyMap {
      width: 93.8%;
      height: 100%;
      display: flex;
      // overflow: auto;
      background-color: #b7ffff;
      .cy {
        width: 100%;
        height: 100%;
      }
    }
    .scroll {
      display: flex;
      overflow: auto;
      width: 3%;
      height: 75.6vh;
      .content {
        width: 100%;
        height: 100%;
      }
    }
    .cy_Area {
      display: flex;
      flex-direction: column;
      position: relative;
      // margin-left: 8px;
      width: 3%;
      height: 100%;
      justify-content: space-between;
      font-size: smaller;
    }
  }
  .modelArea_down {
    display: flex;
    // margin-top: 4px;
    height: 2%;
    width: 94.9%;
    font-size: smaller;
    // border: 1px solid #dce3e6;
  }
}
.drawerDetail {
  padding: 10px;
  width: 100%;
  height: 100%;
  .imageDetail {
    // border: 1px solid #ccc;
    // align-items: center;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    padding-top: 0px;
    width: 98%;
    height: auto;
    margin: 10px;
  }
  .infoDetail {
    width: 98%;
    height: 36%;
  }
}
.popup {
  position: absolute;
  z-index: 9999;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  .img {
    width: 200px;
    height: 200px;
  }
}
#image-container {
  display: none;
}
.nodeinfodata {
  font-size: large;
  color: red;
  margin: 10px;
}
.nodeinfo {
  font-size: small;

  margin: 5px;
}
.rightArea_Down {
  position: block;
  width: 100%;
  height: 6%;
  background: #fff;
  border-radius: 0;
  padding: 6px;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}
.checkBoxStyle {
  margin-bottom: 10px;
  margin-left: 10px;
  width: 40%;
  font-size: large;
  height: fit-content;
}
::v-deep .el-checkbox__label {
  font-size: 20px;
}
::v-deep .el-slider__bar {
  height: 6px;
  background-color: #246177;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  position: absolute;
}
::v-deep .el-button--primary {
  color: #fff;
  background-color: #246177;
  border-color: #246177;
}

.heightSilder {
  display: flex;
  width: 54%;
  height: 100%;
  margin-left: 8px;
  .h-text {
    width: 28%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
